import React from "react";
import MDCTextFieldReact from "../lib/mdc-components/MDCTextFieldReact";
import MDCButtonReact from "../lib/mdc-components/MDCButtonReact";

export default class Admin extends React.Component {
  render() {
    let data = JSON.parse(this.props.dataJSON);

    let userNodes = [];

    if (data["users"]) {
      for (let user of data["users"]) {
        userNodes.push(
          <div key={user.username}>
            <form className="delete-user-form" method="post">
              <input
                type="hidden"
                name="delete_username"
                value={user.username}
              ></input>
              <span>{user.username}</span>
              <MDCButtonReact submitButton label="Delete" />
            </form>
          </div>
        );
      }
    }

    return (
      <div className="edit-users-form">
        <div className="group">
          <form method="post" action="">
            <h2>Add a user</h2>
            <MDCTextFieldReact label="Username" name="username" />
            <br />
            <MDCTextFieldReact
              label="Password"
              inputType="password"
              name="password"
            />
            <br />
            <MDCButtonReact
              submitButton
              classNames={["mdc-button--raised"]}
              label="Add"
            />
            {data["error"] && <p className="push-up error">{data["error"]}</p>}
          </form>
        </div>
        <div className="group">
          <h2>Delete users</h2>
          {userNodes.length != 0 ? userNodes : <i>There are no users yet.</i>}
        </div>
      </div>
    );
  }
}
